<template>
  <div class="water-use-card">
    <div class="head">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/bg_vip.png" />
      <div style="padding: 1.5625rem 1.6875rem; color: #fff; box-sizing: border-box;">
        <div style="text-align: left;">
          <span class="fz-50 fw-600">会员卡</span>
          <span style="margin-left: 0.375rem;">{{ member.card ? member.card.card_no : '' }}</span>
        </div>
        <div class="flex-between-end mt25">
          <div>
            ￥
            <span class="fz-56 fw-600">{{ member.card && member.card.balance || 0 }}</span>
          </div>
          <div>{{ member.member && member.member.mobile || '' }}</div>
        </div>
      </div>
    </div>
    <van-tabs v-model="active" @click="onChange" title-active-color="#FE5E56" color="#FE5E56">
      <van-tab title="会员服务"></van-tab>
      <van-tab title="消费记录"></van-tab>
      <van-tab title="充值记录"></van-tab>
      <van-tab title="赠送记录"></van-tab>
    </van-tabs>
    <div class="box-warpper" v-if="active == 0">
      <div class="server">
        <router-link :to="fun.getUrl('water_machine_recharge')" tag="div" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_pay.png"
            alt />
          <span>充值</span>
        </router-link>
        <router-link :to="fun.getUrl('water_machine_fetch', {}, { device_no })" tag="div" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_water.png"
            alt />
          <span>打水</span>
        </router-link>
        <router-link :to="fun.getUrl('water_machine_tie_card', {}, { device_no })" tag="div" class="felx-column">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_card.png"
            alt />
          <span>绑卡</span>
        </router-link>
        <div class="felx-column" @click="goto">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_class.png"
            alt />
          <span>{{ course_name }}</span>
        </div>
        <div class="felx-column" @click="toScanCode">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_scan.png"
            alt />
          <span>扫码</span>
        </div>
        <router-link tag="div" :to="fun.getUrl('water_machine_no_card', {}, { device_no })" class="felx-column">
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/water_dispenser/icon_nocard.png"
            alt />
          <span >无卡打水</span>
        </router-link>
        <div class="felx-column" @click="delete_card">
          <div style="margin-top: 0.5rem; margin-bottom: 0.1rem;">
            <i  class="iconfont icon-a-jiebanka_huaban1" style="font-size: 1.6rem;"></i>
          </div>
          <span>删除会员卡</span>
        </div>
      </div>
    </div>

    <div class="Presented" v-if="active == 1">
      <template v-for="item in list">
        <div class="Presented-item">
          <div class="flex-between-center fw-600">
            <span class="fz-28">{{ item.remarks }}</span>
            <span class="c-EF5452 fz-30">{{ item.amount }}</span>
          </div>
          <div class="flex-between-center c-7E7E7E fz-24">
            <span>消费类型：刷卡</span>
            <span>余额：{{ item.balance }}</span>
          </div>
          <div style="text-align: left;" class="c-7E7E7E fz-24">卡号：{{ item.card_no }}</div>
        </div>
        <div class="line"></div>
      </template>
    </div>

    <div class="Presented" v-if="active == 2">
      <template v-for="item in list">
        <div class="Presented-item">
          <div class="flex-between-center fw-600">
            <span class="fz-28">卡号：{{ item.card_no }}</span>
            <span class="c-EF5452 fz-30">{{ item.balance }}</span>
          </div>
          <div class="flex-between-center c-7E7E7E">
            <span>{{ item.time }}</span>
            <span>实收：{{ item.value }}</span>
          </div>
        </div>
        <div class="line"></div>
      </template>
    </div>
    <div class="Presented" v-if="active == 3">
      <template v-for="item in list">
        <div class="Presented-item">
          <div class="flex-between-center fw-600">
            <span class="fz-28">订单号：{{ item.order_sn }}</span>
            <span class="c-EF5452 fz-30">{{ item.amount }}</span>
          </div>
          <div class="flex-between-center c-7E7E7E">
            <span>{{ item.recharge_at }}</span>
            <span>余额：{{ item.balance }}</span>
          </div>
        </div>
        <div class="line"></div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      device_no: ""
    };
  },
  props: {
    member: {
      type: Object,
      default: () => ({})
    },
    course_name: {
      type: String,
      default: "教程"
    },
    url: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.device_no = this.$route.query.device_no;
  },
  methods: {
    delete_card() {
      this.$emit("delete_card");
    },
    toScanCode() {
      let that = this;
      if (!this.fun.isWeiXin()) {
        this.$dialog.alert({
          message: "请使用微信浏览器打开"
        });
      } else {
        wx.ready(function () {
          wx.scanQRCode({
            desc: "scanQRCode desc",
            needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              console.log("调用扫描成功", res);
              let str = res.resultStr;
            },
            error: function (err) {
              console.log(err);
              //轻提示
              that.$dialog.alert({
                message: "请使用微信浏览器"
              });
            }
          }); //wx.scanQRcode结束
        });
      }
    },
    goto() {
      window.open(this.url, "_blank");
    },
    onChange() {
      this.$emit("onChange", this.active);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-tabs__nav {
  background-color: unset !important;
}

.water-use-card {
  .no-card {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  padding-bottom: 1.5625rem;

  .fz-40 {
    font-size: 1.25rem;
  }

  .fz-28 {
    font-size: 0.875rem;
  }

  .fz-56 {
    font-size: 1.75rem;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fw-600 {
    font-weight: 600;
  }

  .fz-30 {
    font-size: 0.9375rem;
  }

  .c-7E7E7E {
    color: #7e7e7e;
  }

  .c-ffb55e {
    color: #ffb55e;
  }

  .flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mt25 {
    margin-top: 1.7813rem;
  }

  .flex-between-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .c-6A6A6A {
    color: #6a6a6a;
  }

  .Presented-item {
    padding: 0.875rem;
    font-size: 0.75rem;
  }

  .mt-10 {
    margin-top: 0.625rem;
  }

  .mb-30 {
    margin-bottom: 1.875rem;
  }

  .felx-column {
    display: flex;
    text-align: center;
    flex-direction: column;
  }

  .line {
    width: calc(100% - 1.25rem);
    height: 0.0313rem;
    background: #eee;
    margin: 0.1875rem auto 0;
  }

  .Presented {
    background: #fff;
    margin: 0.7813rem 1.125rem 1.25rem;
    border-radius: 0.625rem;
  }

  .c-EF5452 {
    color: #ef5452;
  }

  .flex {
    display: flex;
  }

  .mt33 {
    margin-top: 2.0625rem;
  }

  .box-warpper {
    background: #fff;
    margin: 1.25rem 1.125rem;
    border-radius: 0.625rem;
    padding: 1.0938rem 1.2813rem 0.7813rem;

    img {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  .server {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: 3rem 3.5rem;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
  }

  .server text {
    font-size: 0.75rem;
    color: #7e7e7e;
    margin-top: 0.375rem;
  }

  .head {
    position: relative;
    color: #fff;
  }

  .head img {
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10.5625rem;
    z-index: -1;
  }

  .fz-50 {
    font-size: 1.5625rem;
  }
}
</style>
